<!--
功能：缴费组件,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/5/31 17:31,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div class="app">
    <div class="box-header">
      <span>个人寝室缴费表单</span>
    </div>
    <div class="box-table">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          v-for="t in table"
          :key="t.id"
          :prop="t.prop"
          :label="t.label">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handle(scope.$index, scope.row)">缴费
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box-footer">
      <span>这不是我们的订单?</span>
      <el-button type="warning" :disabled="dis" @click="cost">一键缴费</el-button>
    </div>
    <el-dialog
      title="缴费提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="payBox">
        <div class="p1">请使用微信扫码支付</div>
        <div class="p2">
          <img src="../../assets/imag/wx.png" alt="">
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="back">取消</el-button>
    <el-button type="primary" @click="handleEdit">我已支付</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import {message} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Cost",
  data() {
    return {
      row: {},
      dialogVisible: false,
      dis: true,
      multipleSelection: [],
      tableData: [],
      table: [{
        id: 1,
        prop: 'floor.name',
        label: '楼层号'
      }, {
        id: 2,
        prop: 'room.name',
        label: '房间号'
      }, {
        id: 3,
        prop: 'content',
        label: '缴费内容'
      }, {
        id: 4,
        prop: 'money',
        label: '缴费金额'
      }, {
        id: 5,
        prop: 'costtime',
        label: '截至日期'
      }, {
        id: 6,
        prop: 'statue',
        label: '缴费状态'
      }],
    };
  },
  components: {},
  computed: {
    ...mapState(["user"])
  },
  mounted() {
    this.costAll()
  },
  methods: {
    back() {
      this.dialogVisible = false
      this.row = {}
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    cost() {
      this.postCost(this.multipleSelection)
    },
    handleEdit() {
      let myCars = new Array(this.row);
      this.postCost(myCars)
      this.dialogVisible = false
    },
    handle(index, row) {
      this.dialogVisible = true
      this.row = row
    },
    //  根据自己所在的楼层和房间查询自己寝室的缴费记录
    costAll() {
      //  发送请求 判别身份
      this.$http.get('user/cost/' + this.user.room.id + '/' + this.user.floor.id).then(response => {
        this.tableData = response.data
        message("success", "成功")
      }).catch(err => {
        message("error", "请求参数错误")
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (this.multipleSelection.length >= 1) {
        this.dis = false
      }else {
        this.dis = true
      }
    },
    // 缴费函数
    postCost(cost) {
      this.$http.post('user/pay', cost).then(response => {
        message("success", "成功")
        //  数据查询
        this.costAll()
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>
.app {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.payBox{
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  padding: 0 40px;
  /*background-color: pink;*/
}
.p1{
  width: 100%;
  height: 10%;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.p2{
  margin: 0 auto;
  width: 90%;
  height: 90%;
}
.p2 img{
  width: 100%;
  height: 100%;
}


/*尾部样式*/
.box-footer {
  width: 90%;
  height: 80px;
  /*background-color: pink;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-footer span {
  color: #909399;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
}

.box-footer span:hover {
  color: #000000;
}


/**/
/*表单格式化*/
.box-table {
  width: 90%;
  min-height: 200px;
  /*background-color: pink;*/
  margin: 20px 0;
}


/**/
/*头部介绍*/
.box-header {
  width: 90%;
  height: 100px;
  font-size: 20px;
  line-height: 100px;
  color: #909399;
  /*background-color: pink;*/
}

/**/

/*表格内容居中显示*/
.box-table /deep/ .el-table th > .cell {
  text-align: center;
}

.box-table /deep/ .el-table .cell {
  text-align: center;
}
</style>
